<template>
  <div>
    <!-- <div class="search-panel">
      <el-input style="max-width: 300px" placeholder="请输入">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div> -->

    <el-table
      :data="pageData.list"
      style="width: 100%; margin-bottom: 10px"
      border
      stripe
      :header-row-style="{ color: '#000', fontWeight: '700', fontSize: '14px' }"
    >
      <el-table-column prop="id" label="ID" />

      <el-table-column prop="nurseId" label="护工ID" />
      <el-table-column prop="nurseName" label="护工姓名" />

      <el-table-column prop="status" label="完成状态">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.status === '待执行'"
            >待执行</el-tag
          >
          <el-tag type="success" v-if="scope.row.status === '已完成'"
            >已完成</el-tag
          >
          <el-tag type="danger" v-if="scope.row.status === '异常'"
            >异常(需要重新分配)</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="taskDetails" label="任务反馈" />
      <el-table-column prop="executedAt" label="执行时间">
        <template #default="scope">
          {{ scope.row.executedAt || "--" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-space style="width: 100%; justify-content: center">
            <!-- <el-button type="primary" plain>任务详情</el-button> -->
            <el-button
              type="danger"
              plain
              @click="handleDelete(scope.row.id)"
              v-if="role === 'admin'"
              >删除</el-button
            >
            <el-button
              plain
              @click="handleComplete(scope.row.id)"
              v-if="role === 'caregiver' && scope.row.status === '待执行'"
              >完成并反馈</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; align-items: center">
      <span style="margin-left: auto; margin-right: 20px"
        >共{{ pageData.total }}条数据</span
      >
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageData.total"
        @current-change="getData"
        v-model:page-size="searchParams.size"
        v-model:current-page="searchParams.page"
      />
    </div>
  </div>
</template>
<script setup>
import {
  deletePlan,
  deleteTask,
  getPlanList,
  getTaskList,
  finishTask,
} from "@/api/request";
import { Search, Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const baseUrl = window.config.baseUrl;
const username = localStorage.getItem("username");
const role = localStorage.getItem("role");
const searchParams = ref({
  page: 1,
  size: 10,
  keyword: "",
});
const pageData = ref({
  total: 0,
  list: [],
});

const handleDelete = async (id) => {
  ElMessageBox.confirm("此操作将删除该数据, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteTask(id);
      ElMessage.success("删除成功");
      getData();
    })
    .catch(() => {});
};
const handleComplete = async (id) => {
  ElMessageBox.confirm("此操作将完成该任务且无法修改, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showInput: true,
    inputPlaceholder: "请输入任务反馈",
    inputPattern: /^[\s\S]*$/,
    inputType: "textarea",
    type: "warning",
  })
    .then(async (data) => {
      if (!data.value) {
        ElMessage.error("请输入任务反馈");
        return;
      }
      await finishTask({
        taskId: id,
        taskDetail: data.value,
      });
      ElMessage.success("操作成功");
      getData();
    })
    .catch(() => {});
};
const getData = async () => {
  let res = await getTaskList(searchParams.value);
  pageData.value = res.data;
};
getData();
</script>
<style scoped lang="less">
.search-panel {
  margin-bottom: 10px;
  display: flex;
  .btns {
    margin-right: auto;
  }
}
</style>
